<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.ico"/>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/common.css">

    <link rel="stylesheet" href="../../layui/extend/dtree.css">
    <link rel="stylesheet" href="../../layui/extend/font/dtreefont.css">

    <!-- 图标 -->
    <link rel="stylesheet" href="../../static/CaoMei/style.css">
</head>
<body>
<div class="yadmin-body animated fadeIn">

    <form class="layui-form yadmin-search-area input" action="/orderWaiter/selectList">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="visiterName" class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="visiterName" autocomplete="off"
                           id="visiterName" class="layui-input">
                </div>
                <label for="waiterName" class="layui-form-label">服务员名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="waiterName" autocomplete="off"
                           id="waiterName" class="layui-input">
                </div>

                <button type="button"  data-type="reload" lay-filter="search"
                        class="layui-btn" >
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </div>
    </form>

    <table class="layui-hide" id="orderWaiter-table"></table>
</div>

<script type="text/html" id="toolbar">

    <!--<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add">-->
        <!--<i class="layui-icon layui-icon-addition"></i>-->
        <!--新增-->
    <!--</button>-->

</script>
<script type="text/html" id="column-toolbar">
    <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete" title="删除"></i>
        删除
    </button>

</script>

<script src="../../js/jquery.js"></script>
<script src="../../layui/layui.js"></script>
<script src="../../js/common.js"></script>

<script>
    layui.config({
        base: '/layui/extend/'
    }).use(['table', 'element', 'dtree', 'form', 'tablePlug'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var tree = layui.tree;
        var form = layui.form;
        var tablePlug = layui.tablePlug;
        tablePlug.smartReload.enable(true);
        table.render({
            elem: '#orderWaiter-table',
            url: '/orderWaiter/selectList',
            cellMinWidth: 80,
            page: true,
            toolbar: '#toolbar',
            smartReloadModel: true,
            response:{
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 0, //成功的状态码，默认：0
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            cols: [
                [
                    {type: 'numbers', title: '序号', width: 60},
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'visiterName', title: '游客名称', minWidth: 120},
                    {field: 'waiterName', title: '服务员名称', minWidth: 120},
                    {field: 'createTime', title: '创建时间', align: 'center', width: 180},
                    {field: 'number', title: '时间', minWidth: 120},
                    {field: 'price', title: '价格', minWidth: 120},
                    {field: 'total', title: '钱数', minWidth: 120},
                    {field: 'status', title: '完成情况', minWidth: 120},
                    {field: 'address', title: '地点', minWidth: 120},
                    {title: '操作', fixed: 'right', width: 200, align: 'center', toolbar: '#column-toolbar'}
                ]
            ], done: function (res,curr,count) {
                $("[data-field='status']").children().each(function(){
                    if($(this).text()=='0'){
                        $(this).text("未完成")
                    }else if($(this).text()=='1'){
                        $(this).text("完成")
                    }else if($(this).text()=='-1'){
                        $(this).text("状态错误")
                    }
                })
            },

            id:'orderWaiter-table',
            limit:5,
            page:{
                layout:['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                ,limits:[5,10,15]
                ,first:false
                ,last:false
            },
            skin:'line'
        });

        var active = {
            reload: function () {
                var visiterName = $('#visiterName');
                var waiterName = $('#waiterName');
                table.reload('orderWaiter-table',{
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                            visiterName:  visiterName.val()	,	//在表格中进行搜索
                            waiterName:  waiterName.val()		//在表格中进行搜索
                        }
                    }
                )
            }
        };
        $('.layui-inline .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        // form.on('submit(search)', function (form) {
        //     table.reload('orderWaiter-table', {
        //
        //         where: form.field
        //     });
        //     return false;
        // });

        // table.on('toolbar', function (obj) {
        //     var event = obj.event;
        //     if (event === 'add') {
        //         add();
        //     }
        // });

        table.on('tool', function (obj) {
            var data = obj.data;
            var event = obj.event;

            if (event === 'edit') {
                edit(data.id);

            } else if (event === 'del') {
                layer.confirm("确定删除角色吗?", {icon: 3, title: '提示'},
                    function (index) {// 确定回调
                        deluser(data)
                        layer.close(index);
                        table.reload('orderWaiter-table');
                    }, function (index) {//取消回调
                        layer.close(index);
                    }
                );
            }
        });
        function deluser(data){
            $.ajax({
                url: "/orderWaiter/delete/"+data.id,    //这个是后台的路由地址
                type: "POST",
                // data:{"id":data.id},//传给后台的值
                dataType: "json",
                success: function(data){
                    if(data.code==0){   //从前台取回的状态值
                        layer.close(index);
                        //同步更新表格和缓存对应的值
                        table.reload('orderWaiter-table');
                        layer.msg("删除成功", {icon: 6});
                    }else{
                        layer.msg("删除失败", {icon: 5});
                        table.reload('orderWaiter-table');
                    }
                }
            });

        }
    //     function add() {
    //         layer.open({
    //             content: "/view/role/role-add.html",
    //             title: "新增角色",
    //             area: ['40%', '85%'],
    //             type: 2,
    //             maxmin: true,
    //             shadeClose: true,
    //             end: function () {
    //                 table.reload('orderWaiter-table');
    //             }
    //         });
    //     }
    //
    //     function edit(id) {
    //         layer.open({
    //             content: '/waiter/queryById/'+id,
    //             title: "编辑角色",
    //             area: ['40%', '85%'],
    //             type: 2,
    //             maxmin: true,
    //             shadeClose: true,
    //             end: function () {
    //                 table.reload('orderWaiter-table');
    //             }
    //         });
    //     }
    });
</script>

</body>
</html>